<template>
  <view class="user_info">
    <view class="head_view">
      <u-icon name="arrow-left" bold size="40" @click="onToBack"></u-icon>
      <text class="head">个人信息</text>
      <view style="width: 50rpx"> </view>
    </view>
    <view class="info_container">
      <u-cell-group :border="false">
        <u-cell title="头像" center>
          <template #value>
            <view class="user_head_box">
              <up-avatar
                :src="userInfoData.avatar || DefaultHead"
                style="margin-right: 15rpx"
                size="60"
              ></up-avatar>
              <!-- <view class="img_box">
                <image
                  style="width: 100%; height: 100%"
                  src="@/static/user_default.png"
                  mode="aspectFill"
                />
              </view> -->
              <u-icon name="arrow-right" bold size="30"></u-icon>
            </view>
          </template>
        </u-cell>
        <u-cell title="用户名" center>
          <template #value>
            <up-input
              placeholder="请输入用户名"
              inputAlign="right"
              border="none"
              v-model="userInfoData.name"
            ></up-input>
          </template>
        </u-cell>

        <u-cell title="手机号" center>
          <template #value>
            <up-input
              placeholder="请输入手机号"
              inputAlign="right"
              border="none"
              v-model="userInfoData.phone"
            ></up-input>
          </template>
        </u-cell>
        <u-cell title="密码" center>
          <template #value>
            <up-input
              placeholder="请输入密码"
              inputAlign="right"
              border="none"
              :value="userInfoData.password"
            ></up-input>
          </template>
        </u-cell>
      </u-cell-group>
      <view class="handler">
        <up-button
          :hairline="false"
          color="#eb5757"
          text="重新编辑"
          shape="circle"
        ></up-button>
      </view>
    </view>
    <u-loading-page
      :loading="loading"
      font-size="30"
      icon-size="30"
    ></u-loading-page>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { userInfo } from "../modules/api";
import DefaultHead from "@/static/user_default.png";

const loading = ref(false);
const userInfoData = ref({
  name: "",
  phone: "",
  password: "",
  avatar: "",
});

onReady(() => {
  loading.value = true;
  userInfo().then(
    (data) => {
      console.log(data);
      userInfoData.value = data;
      loading.value = false;
    },
    () => {
      loading.value = false;
    }
  );
});

function onToBack() {
  uni.navigateBack({
    delta: 1,
  });
}
</script>

<style lang="scss" scoped>
.user_info {
  height: 100%;
  .info_container {
    padding: 0 50rpx;
    .handler {
      margin-top: 250rpx;
    }
    .user_head_box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .img_box {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
      }
    }
  }
  .head_view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
  }
}
</style>
